/* eslint-disable no-const-assign */
/* eslint-disable default-param-last */
/* eslint-disable jsx-a11y/label-has-associated-control */
/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable no-shadow */
/* eslint-disable no-debugger */
/* eslint-disable react/no-array-index-key */

/**
 * Grid表单布局结构
 * @Author Lianqi
 * @Date 2022-7-8
 * @description
 *  适应表单layout属性为：
 *  GRID: 'grid', // 网格布局
 */

import { useMemo } from 'react'
import { Form, Row, Col } from 'antd'
import "./less/FormLayoutGrid.less"
import FieldControl from './formitem/FieldControl'
import FieldText from './formitem/FieldText'
import FCGridFormItem from './formitem/FCGridFormItem'
import { ControlType as TYPE } from '../config/Constant'
import NumberRange from './formitem/NumberRange'
import { MODE, GRID_FIELD_GUTTER, FIELD_MODE, GRID_COL_COUNT } from '../config/Constant'

function FormLayoutGrid(props) {
  // isButtonLineFeed 按钮是否换行
  const { mode: formMode = MODE.EDIT, formParams, fieldList, buttonBar, isButtonLineFeed = true } = props
  const { labelProps: formLabelProps = {}, grid = {} } = formParams
  const { colCount = GRID_COL_COUNT, labelWidth } = grid

  // 计算
  const layoutParams = useMemo(() => {
    let colTotalEachRow = 0 // 每行列总数

    const colSpan = 24 / colCount // 每列的span数量
    const fieldColList = fieldList?.map((field, index) => {
      // 计算跨列的特殊field的col
      const { layoutProps, mode = FIELD_MODE.EDIT } = field
      if (mode === FIELD_MODE.HIDDEN) {
        return null
      }
      if (colTotalEachRow === colCount) {
        colTotalEachRow = 0
      }
      const fieldColCount = layoutProps && layoutProps.colCount ? layoutProps.colCount : 1 // 字段占表格的列数，缺省1列
      colTotalEachRow += fieldColCount
      // console.log(`fieldColCount:${fieldColCount} TotalEachRow:${colTotalEachRow}`)

      if (layoutProps && layoutProps.colCount) {
        return { span: fieldColCount * colSpan }
      }
      return null
    })
    // 表格末尾按钮所占列数
    const buttonCols = colTotalEachRow === colCount ? colCount : colCount - colTotalEachRow
    const buttonCol = { span: buttonCols * colSpan }
    // console.log(`colSpan:${colSpan}`)
    // console.log(`buttonCols:${buttonCols}`)
    // console.log(buttonCol)

    return {
      colSpan,
      fieldColList,
      buttonCol,
    }
  }, [formParams, fieldList])

  return (
    <>
      <Row gutter={GRID_FIELD_GUTTER} justify="start"  className='form-layout-grid'>
        {fieldList?.map(
          (
            {
              key,
              label,
              mode: fieldMode = FIELD_MODE.EDIT,
              labelProps,
              formitemprops,
              controlProps,
              controlType,
              textFieldName,
              text,
            },
            index
          ) =>
            fieldMode !== FIELD_MODE.HIDDEN ? (
              <Col
                key={`col${key}`}
                {...(layoutParams.fieldColList[index] || { span: layoutParams.colSpan })}
              >
                <FCGridFormItem
                  key={key}
                  label={label}
                  labelWidth={labelWidth}
                  fieldProps={formitemprops}
                  labelProps={{ ...labelProps, ...formLabelProps }}
                >
                  {formMode === MODE.READONLY || fieldMode === FIELD_MODE.READONLY ? (
                    <FieldText {...controlProps} withText={textFieldName} text={text} />
                  ) : ( controlType === TYPE.INPUT_NUMBER_RANGE ? (<NumberRange />) : 
                  (
                    <FieldControl
                      disabled={formMode === MODE.DISABLED || fieldMode === FIELD_MODE.DISABLED}
                      {...controlProps}
                    />
                  )
                  )}
                </FCGridFormItem>
              </Col>
            ) : (
              <Form.Item key={key} hidden>
                <FieldControl {...controlProps} />
              </Form.Item>
            )
        )}
        {!isButtonLineFeed &&
          <Col {...layoutParams.buttonCol} style={{
            textAlign: 'right',
          }}>
            {buttonBar}
          </Col>}
      </Row>
      {isButtonLineFeed &&
        <Row>
          <Col span={24}
          style={{
            textAlign: 'right',
          }}>
            {buttonBar}
          </Col>
        </Row>}
    </>
  )
}

export default FormLayoutGrid
